<template>
  <!-- 关于我们内层第二屏 -->
  <div class="container">
    <img src="./img/shubiao.png" alt="" class="shubiao" />
    <h3>JOIN <span>US</span></h3>
    <ul>
      <li v-for="(item, index) in text" :key="index">
        <img src="./img/02SanJiao.png" alt="" />{{ item.content }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      text: [
        {
          content:
            ' 我们提倡高效率工作、上下班时间可以弹性制，也支持你在完成工作内容之余自己学习充电，更提供有每周一次的健身锻炼机会。'
        },
        {
          content:
            ' 如果你喜欢小动物，这里还有一只可爱的喵星人小姑娘“露娜~”，你也可以带上自己的宠物小伙伴一起上班，当然——不影响工作是大前提。'
        },
        {
          content:
            ' 我们正在招聘的职位可以看看招聘网站上的信息（例如BOSS直聘），或者直接发简历给hr邮箱。'
        },
        {
          content:
            ' 我们的愿景是期待并致力于成为全国顶级的数字孪生解决方案公司，期待你的加入！'
        }
      ]
    };
  },
  computed: {},
  mounted() {},
  methods: {},
  components: {}
};
</script>

<style scoped lang="less">
.shubiao {
  position: absolute;
  right: 24.5%;
  top: 80%;
  animation: jump 2s ease infinite;
}
@keyframes jump {
  0% {
    transform: translateY(0) scale(1);
  }
  /* 中间状态图片位移并且拉伸 */
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
.container {
  width: 100vw;
  height: 100vh;
  background-image: url('./img/01aboutBj.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding-top: 16vh;
    overflow-y: hidden;
  overflow-x: hidden;
  h3 {
    font-size: 0.66rem;
    font-family: PingFang SC;
    font-weight: bold;
    color: #2ae5a1;
    margin-left: 63vw;
    margin-top: 1vh;
    span {
      color: #fff;
    }
  }
  ul {
    margin-top: 4vh;
    width: 32vw;
    margin-left: 63vw;
    li {
      margin-top: 4vh;
      position: relative;
      line-height: 3vh;
      width: 100%;
      font-size: 0.18rem;
      font-family: PingFang SC;
      font-weight: bold;
      color: #ffffff;
      opacity: 0.79;
      list-style: none;
      img {
        position: absolute;
        width: 0.5vw;
        left: -1.5vw;
        top: 0.9vh;
      }
    }
  }
}
</style>
